<template>
  <div class="person">
    <h2>汽车信息:一辆{{ car.brand }} 车, 价值{{ car.price }}万</h2>
    <button @click="changeBrand">修改汽车品牌</button>
    <button @click="changePrice">修改汽车价格</button>
    <button @click="changeCar">修改汽车</button>
    <br>
    <h2>当前求和为:{{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>


<script lang="ts" setup>
import {ref, reactive} from "vue";
//数据 ref修饰对象时在使用的时候需要加.value
// let car = reactive({brand: '奔驰', price: 100})
let car = ref({brand: '奔驰', price: 100})


let obj = reactive({ x: 999 });
let sum = ref(0)

function changeSum() {
  sum.value += 1
}


function changePrice() {
  car.value.price += 10
}
function changeBrand() {
  car.value.brand='宝马'
}
function changeCar() {
  // car = {brand:'奥拓',price:10} 页面不更新
  // Object.assign(car,{brand:'奥拓',price:10})
  car.value = { brand: '奥拓', price: 10 } 
 
}

</script>

<style scoped>
li {
  font-size: 20px;
}
button{
  margin: 0 10px auto;
}
</style>
